///*------------------------------------*\
//    #BUTTON
//\*------------------------------------*/

// Button vars
$btn-padding:   ('xs': 10px, 's': 12px, 'm': 14px, 'l': 16px, 'xl': 26px);
$btn-font-size: ('xs': 11px, 's': 11px, 'm': 13px, 'l': 14px, 'xl': 16px);
$btn-icon-size: ('xs': 13px, 's': 15px, 'm': 20px, 'l': 24px, 'xl': 28px);





// Button mixins
@mixin btn($size, $color, $type, $disabled: null) {
    @include btn-reset;

    @if $disabled {
        @include btn-disabled($type);
    }

    @include btn-size($size, $type);
    @include btn-color($color, $type);
    @include btn-type($type);
}

@mixin btn-reset() {
    z-index: 2;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;

    &,
    &:hover,
    &:active,
    &:focus {
        text-decoration: none;
        outline: none;
    }

    &::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    .ripple {
        z-index: -1;
    }
}

@mixin btn-disabled($type) {
    box-shadow: none !important;
    cursor: not-allowed;
    color: $black-3 !important;

    @if $type == 'raised' or $type == 'fab' {
        background-color: $grey-300 !important;
    }

    @if $type == 'flat' or $type == 'icon' {
        background-color: transparent !important;
    }

    .ripple {
        display: none;
    }
}

@mixin btn-size($size, $type: null) {
    padding-left: map-get($btn-padding, $size);
    padding-right: map-get($btn-padding, $size);
    @include font-size(map-get($btn-font-size, $size));
    line-height: map-get($sizes, $size);

    @if $type == 'icon' or $type == 'fab' {
        @include size(map-get($sizes, $size));
        padding: 0;

        .mdi {
            vertical-align: top;
            line-height: map-get($sizes, $size);
        }
    }

    @if $type == 'icon' {
        @include font-size((map-get($btn-icon-size, $size)));
    }

    @if $type == 'fab' {
        @include font-size((map-get($btn-font-size, $size)) + 4);
    }
}

@mixin btn-color($color, $type) {
    @if $type == 'raised' or $type == 'fab' {
        @if $color == 'white' or $color == 'light-blue' or $color == 'cyan' or $color == 'light-green' or $color == 'lime' or $color == 'yellow' or $color == 'amber' or $color == 'orange' or $color == 'grey' {
            color: $black-1;
        } @else {
            color: $white-1;
        }

        background-color: map-get($colors, $color);

        .ripple {
            background-color: darken(map-get($colors, $color), 50%);
        }
    }

    @if $type == 'flat' or $type == 'icon' {
        color: map-get($colors, $color);

        .ripple {
            background-color: map-get($colors, $color);
        }

        &:hover {
            background-color: rgba(map-get($colors, $color), 0.15);
        }
    }
}

@mixin btn-type($type) {
    @if $type == 'raised' or $type == 'flat' {
        border-radius: $base-round;
    }

    @if $type == 'raised' or $type == 'fab' {
        @include z-depth(1);
        @include transition-property(box-shadow);
        @include transition-duration(0.2s);

        &:hover {
            @include z-depth(2);
        }
    }

    @if $type == 'flat' or $type == 'icon' {
        @include transition-property(background-color);
        @include transition-duration(0.2s);
    }

    @if $type == 'icon' or $type == 'fab' {
        border-radius: 50%;
    }
}





// Button base styles
.btn,
%btn {
    @include btn-reset;
}





// Disabled states
.btn--raised[disabled],
%btn--raised[disabled],
.btn--raised.btn--is-disabled,
%btn--raised%btn--is-disabled {
    @include btn-disabled('raised');
}

.btn--fab[disabled],
%btn--fab[disabled],
.btn--fab.btn--is-disabled,
%btn--fab%btn--is-disabled {
    @include btn-disabled('fab');
}

.btn--flat[disabled],
%btn--flat[disabled],
.btn--flat.btn--is-disabled,
%btn--flat%btn--is-disabled {
    @include btn-disabled('flat');
}

.btn--icon[disabled],
%btn--icon[disabled],
.btn--icon.btn--is-disabled,
%btn--icon%btn--is-disabled {
    @include btn-disabled('icon');
}





// Sizes
@each $key, $size in $sizes {
    .btn--#{$key},
    %btn--#{$key} {
        @include btn-size($key);
    }
}





// Raised / FAB buttons
.btn--raised,
%btn--raised {
    @include btn-type('raised');
}

.btn--fab,
%btn--fab {
    @include btn-type('fab');
}

@each $key, $color in $colors {
    .btn--raised.btn--#{$key},
    %btn--raised%btn--#{$key} {
        @include btn-color($key, 'raised');
    }

    .btn--fab.btn--#{$key},
    %btn--fab%btn--#{$key} {
        @include btn-color($key, 'fab');
    }
}





// Flat / Icon button
.btn--flat,
%btn--flat {
    @include btn-type('flat');
}

.btn--icon,
%btn--icon {
    @include btn-type('icon');
}

@each $key, $color in $colors {
    .btn--flat.btn--#{$key},
    %btn--flat%btn--#{$key} {
        @include btn-color($key, 'flat');
    }

    .btn--icon.btn--#{$key},
    %btn--icon%btn--#{$key} {
        @include btn-color($key, 'icon');
    }
}





// Icon / FAB buttons
@each $key, $size in $sizes {
    .btn--icon.btn--#{$key},
    %btn--icon%btn--#{$key} {
        @include btn-size($key, 'icon');
    }

    .btn--fab.btn--#{$key},
    %btn--fab%btn--#{$key} {
        @include btn-size($key, 'fab');
    }
}
